<template>
  <div class="div_main">
    <el-card class="box-card" style="width: 600px;">
      <div slot="header" class="clearfix">
        <span>批量充值</span>
        <span :style="{'color': color}" style="float: right; padding: 3px 0">当前最多可批量充值500张卡</span>
      </div>
      <div>
        <el-form :model="form" ref="form" :rules="rules" label-width="150px">
          <el-form-item prop="type" label="卡号类型">
            <el-radio-group v-model="form.type" @change="changeRechargeType">
              <el-radio :label="1">起始结束卡号</el-radio>
              <el-radio :label="2">不规则卡号</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="startNum" label="起始卡号" v-if="form.type=='1'">
            <el-input v-model.trim="form.startNum" type="text" min="0" max="2147483648" style="width: 300px" :disabled="dictEdite&&form.startNum"></el-input>
          </el-form-item>
          <el-form-item prop="endNum" label="结束卡号" v-if="form.type=='1'">
            <el-input v-model.trim="form.endNum" type="text" style="width: 300px" :disabled="dictEdite&&form.endNum"></el-input>
          </el-form-item>
          <el-form-item prop="numberStr" label="卡号(一行一个卡号)" v-if="form.type=='2'">
            <el-input type="textarea" v-model="form.numberStr" style="width: 100%" :rows="10" placeholder="请输入卡号，每行一个" onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')" :disabled="dictEdite&&num>0"></el-input>
          </el-form-item>
          <el-form-item prop="setMealHeadId" label="套餐大类">
            <el-select v-model="form.setMealHeadId" :disabled="dictEdite&&form.endNum" >
              <el-option v-for="item in setMealHeadOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="obj" label="充值对象" v-if="roleChar.indexOf('OEM')==0">
            <el-radio-group v-model="form.obj" :disabled="dictEdite&&num>0" @change="changeRechargeObj">
              <el-radio label="OEM">自己</el-radio>
              <el-radio label="AGENT">代理</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="loginName" label="代理账号(可搜索)" v-if="roleChar.indexOf('OEM')==0&&form.obj=='AGENT'">
            <el-autocomplete
              class="inline-input"
              v-model="form.loginName"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              @select="handleSelect"
              :disabled="dictEdite&&num>0"
              placeholder="请输入代理账号">
            </el-autocomplete>
          </el-form-item>
          <el-form-item prop="nums" :label="'卡号'+num+'张'" v-if="num>0">
            <el-input type="textarea" v-model="form.nums" style="width: 100%" :rows="10" placeholder="请输入卡号，每行一个" onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')" disabled></el-input>
          </el-form-item>
          <el-form-item prop="setMealId" label="套餐列表" v-if="showMealFormItem">
            <el-select v-model="mealDetail" @change="changeSetMeal">
              <el-option v-for="item in headMealOptions" :key="item.value" :value="item" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="dictIsPreStorage" label="是否次月生效" v-if="showMealFormItem&&form.setMealId">
            <el-select v-model="form.dictIsPreStorage">
              <el-option value="YES" label="次月生效" :disabled="this.mealDetail.flag!='YES'"></el-option>
              <el-option value="NO" label="本月生效"></el-option>
            </el-select>
            <span v-if="mealDetail.flag!='YES'" style="margin-left: 5px;color: #aa3426">* 当前套餐暂不支持次月生效</span>
          </el-form-item>
          <el-form-item prop="paymentId" label="支付方式" v-if="showMealFormItem&&form.setMealId">
            <div v-for="item in paymentList" :style="{'display': 'inline-flex','align-items': 'center','border':form.paymentId==item.id?'1px solid '+ color:'1px solid #e6e6e6','border-radius':'5px','cursor':'pointer','margin-right':'5px','padding':'0 12px'}" @click="form.paymentId=item.id;form.paymentType=item.type">
              <svg v-if="item.type=='WXZF'||item.type=='WEIXIN'" t="1605260214796" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3810" width="22" height="22">
                <path
                  d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z"
                  fill="#09BB07" p-id="3811"></path>
              </svg>
              <svg v-if="item.type=='ZFBZF'" t="1605261470376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3954" width="22" height="22">
                <path
                  d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z"
                  fill="#02A9F1" p-id="3955"></path>
              </svg>
              <svg v-if="item.type=='UPSMZF'" t="1605261528199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4098" width="22" height="22">
                <path d="M229.643 233.89c-26.054 3.28-52.107 24.846-60.636 49.688-5.683 15.47-107.536 454.219-108.005 462.19-0.949 22.968 12.314 39.844 34.104 44.064 8.055 1.874 266.703 1.874 275.232 0 24.631-4.69 47.843-23.908 56.372-47.345 3.316-8.906 108.48-456.093 108.48-463.595 1.422-21.096-11.372-38.44-31.738-44.533-4.739-0.934-262.912-1.874-273.81-0.47z" fill="#E60012" p-id="4099"></path>
                <path d="M470.762 233.89c-26.054 3.28-52.107 24.846-60.632 49.688-5.214 15.47-107.534 454.219-107.534 462.19-0.95 22.968 12.314 39.844 34.108 44.064 8.05 1.874 266.698 1.874 275.227 0 24.635-4.69 47.847-23.908 56.372-47.345 3.317-8.906 108.479-456.093 108.479-463.595 1.424-21.096-11.366-38.44-31.736-44.533-5.214-0.934-263.387-1.874-274.284-0.47z" fill="#00508E" p-id="4100"></path>
                <path d="M722.308 233.89c-26.054 3.28-52.112 24.846-60.637 49.688-5.209 15.47-107.534 454.219-107.534 462.19-0.945 22.968 12.32 39.844 34.108 44.064 8.055 1.874 200.383 1.874 208.908 0 24.634-4.69 47.847-23.908 56.372-47.345 3.316-8.906 108.484-456.093 108.484-463.595 1.418-21.096-11.371-38.44-31.743-44.533-4.734-1.404-220.748-2.343-231.645-0.934h23.687v0.465z" fill="#00908C" p-id="4101"></path>
                <path
                  d="M221.589 376.39c0 0.47-0.476 3.282-1.42 6.095-10.896 36.562-21.793 85.781-20.37 91.874 3.79 18.283 30.793 16.876 40.266-2.343 2.842-5.154 23.212-90.936 23.212-97.028 0-0.47 32.212 0 32.212 0.464 0 0 0 1.408-0.475 2.817-0.474 1.403-5.683 21.091-11.366 44.529-12.795 49.688-14.213 54.842-20.845 64.686-21.793 31.878-94.746 30.94-100.429-1.404-1.422-7.032 14.213-88.124 21.32-110.159 0-1.403 37.895-0.469 37.895 0.47z m484.139 0c21.79 4.69 28.42 22.03 18.472 47.816-9.947 25.78-31.262 37.028-68.686 37.028-11.371 0-10.423-1.874-17.529 33.282-1.419 6.562-2.841 12.656-2.841 13.594-0.476 2.343-34.11 2.343-33.635 0 28.426-120.468 30.793-130.78 30.793-131.72l0.474-1.402h34.104c27.003 0.464 34.583 0.464 38.848 1.403z m-292.282 46.408c4.735 0.938 8.05 4.69 8.05 7.97 0 11.717-24.16 19.688-33.16 10.779-8.525-8.905 9.475-22.5 25.11-18.75z m-83.849 8.904c0 0.94-0.474 2.817-0.474 4.22l-0.474 1.878 5.683-2.816c15.16-7.497 29.844-6.094 34.583 3.281 2.841 5.629 2.367 8.91-5.21 43.595-1.422 6.094-3.315 14.534-3.79 18.748-1.897 9.38-0.474 8.91-17.528 8.91-14.687 0-14.687 0-14.212-1.408 0-0.938 1.896-8.435 3.79-17.345 7.58-33.277 8.055-37.967 1.422-37.967-3.79 0-9.004 2.343-9.473 3.75-0.948 3.282-9.478 44.06-9.952 47.812l-0.945 4.22-14.687 0.938c-17.998 0.47-16.58 1.873-12.79-14.064 5.21-20.626 8.055-35.154 9.949-48.28 2.367-14.063 0.948-12.655 14.212-14.532 6.158-0.94 12.315-1.874 14.213-2.343 4.735-1.409 5.683-0.94 5.683 1.403z m225.014-0.464c0 0.933-0.474 2.811-0.474 4.216l-0.476 2.346 5.688-2.816c29.37-14.998 40.737-2.813 32.212 35.628-1.893 8.436-4.265 20.623-5.683 26.25-0.949 6.094-2.372 11.248-2.842 11.717-1.898 1.874-29.844 1.41-29.375 0 0-0.938 1.898-8.435 3.791-16.875 8.056-34.216 8.056-38.436 0.949-38.436-5.683 0-8.525 1.873-9.473 6.092-1.424 5.155-8.53 38.906-9.475 45l-0.948 5.158-14.687 0.47c-17.999 0.465-16.58 2.342-12.316-15.003 4.74-18.75 8.056-36.094 10.423-48.749 1.893-12.187 0.474-10.782 12.315-12.656 5.213-0.938 11.846-1.878 14.214-2.342 4.738-2.348 6.157-1.878 6.157 0z m287.547-0.47c1.892 28.592 2.368 37.028 2.368 37.498 0 0.47 4.264-7.032 8.999-16.406 9.473-18.749 7.58-16.876 18.002-18.28 2.842-0.469 8.525-1.409 12.79-2.342 10.423-1.878 10.423-2.817-1.423 17.81-16.105 27.658-38.368 66.564-46.423 80.627-24.157 43.591-24.157 43.591-44.527 44.06l-12.316 0.47 0.945-3.282c0.474-1.873 1.897-5.623 2.37-8.435l1.42-5.159h3.79c4.265 0 5.209-0.94 9-7.502 1.423-2.342 3.79-6.093 4.738-8.435 1.42-2.343 6.158-9.844 9.949-17.345l7.58-13.125-1.897-17.34c-2.367-20.158-5.209-44.065-6.631-51.097-0.95-6.562-0.95-6.562 7.58-7.5 3.79-0.466 9.948-1.874 13.264-2.343 8.999-2.812 9.947-2.812 10.422-1.874z m-357.183 0.47c36.476 6.562 23.686 69.37-16.106 78.28-27.003 6.094-45.475-4.22-45.475-24.847 0.47-36.093 27.472-59.53 61.58-53.433z m272.86 1.873c1.893 0.938 4.739 2.812 6.158 4.22 2.367 2.342 2.367 2.342 2.367 0.934 0.475-1.873 0-1.873 18.951-4.685 15.158-2.342 14.684-2.342 13.739 1.874-6.158 26.249-11.371 49.217-13.739 60.47-3.315 16.876-0.948 14.998-19.421 14.529h-15.635v-1.874c0-1.873-0.945-2.812-1.894-1.407-5.213 8.44-30.792 5.158-37.898-5.155-17.525-26.25 19.896-81.562 47.371-68.906z m-340.129 13.595s0 2.342-0.474 4.219c-3.786 14.999-10.418 45.469-11.842 51.092l-1.422 7.032-15.632 0.469c-18.472 0.47-17.528 1.404-13.738-9.843 3.316-10.783 6.633-23.908 8.53-37.972 1.892-12.186 0-10.313 13.738-12.186 6.157-0.94 12.79-1.873 14.208-2.342 3.79-0.939 6.158-0.939 6.632-0.47z m82.9 97.028c0 0.47-0.944 2.348-2.367 4.69-0.95 2.342-2.367 4.22-2.367 4.22 27.946 0.464 28.895 0.464 28.42 1.873l-5.209 16.876h-40.74l-2.367 1.873c-5.214 4.689-32.686 10.782-32.686 7.031l5.21-16.875h3.789c6.632 0 8.05-1.404 13.738-11.247l4.735-8.91c24.636-0.465 29.843 0 29.843 0.47z m62.06 0c0 0.47-0.475 2.812-1.424 5.629-0.948 2.342-1.417 4.685-1.417 5.154 0 0 2.366-0.94 5.207-3.28 10.423-7.033 19.422-8.437 45.95-8.437 10.423 0 19.422 0 19.896 0.465 0.475 0.939-15.156 51.565-17.528 56.25-3.316 6.098-6.633 9.379-11.84 11.721l-4.74 1.874-26.998 0.47-27.003 0.468-4.738 15.937c-9.474 30.47-9.474 28.128 4.264 26.72 10.897-0.94 10.423-1.873 7.107 9.374l-2.842 9.375h-13.738c-29.844 0.47-33.634-1.404-30.793-13.594 1.423-6.094 35.528-117.656 36.002-118.595 0.474-0.465 24.635-0.465 24.635 0.47z m124.584 0c0 0.47-0.474 1.877-0.944 3.75-1.423 4.69-1.423 4.69 4.735 1.41 8.054-4.221 27.002-5.629 65.845-5.629h12.32v5.629c0 6.562 0.475 7.03 6.158 7.966l4.264 0.469-2.372 8.44-2.366 8.435h-8.53c-21.789 0.47-25.104-1.873-25.58-14.528v-6.098l-1.418 4.22-1.423 4.69H733.2c-2.367 0-4.735 0-4.735 0.47 0 0-23.211 76.401-26.528 87.184-0.474 0.94 0 1.409 2.843 1.409 4.264 0 4.264 0 2.841 3.745-1.419 4.221-1.419 4.221 3.316 4.221 3.316 0 5.214-0.47 7.58-1.873 3.317-1.878 3.317-1.408 18.473-22.5l6.158-8.909h-12.79c-15.631 0-14.207 0.939-11.366-8.435l2.367-7.502h31.268c2.841-9.844 3.785-12.656 3.785-13.125 0-0.47-6.632-0.47-15.156-0.47h-15.158l4.735-16.875h42.633c23.212 0 42.638 0 42.638 0.47 0 0.469-0.948 4.22-2.37 8.44l-2.368 7.966-14.213 0.469-14.21 0.469c-2.37 7.032-3.315 10.313-3.789 11.252l-0.474 1.873h13.738c16.106 0 15.157-0.938 11.84 8.436l-2.367 7.501h-31.266l-4.735 5.624h12.316l1.892 11.252c1.898 12.656 1.898 12.656 8.055 12.656 4.74 0 4.74-0.94 1.424 10.312l-2.847 9.375h-8.999c-15.631 0-18.473-2.342-21.32-18.28l-1.418-10.313-5.683 7.502c-15.636 21.091-16.58 21.56-36.476 21.56-12.794 0-12.794 0-10.897-3.75 0.475-1.873 0.475-1.873-3.316-1.873-3.79 0-3.79 0-4.738 2.812l-0.475 2.811H666.88l0.474-1.408c1.424-4.684 3.79-4.215-25.105-4.215-25.109 0-26.527 0-26.053-1.409l2.368-8.435c2.841-8.44 2.367-8.44 5.209-8.44 2.37 0 2.37 0 3.315-3.281 22.268-73.592 29.374-97.03 30.319-100.31l1.897-6.094h13.264c8.525 0 14.682 0.465 14.682 0.934z m-168.167 40.314l-5.213 16.406h-28.42c-2.842 9.375-3.79 12.187-4.266 13.125-0.474 1.409 0.475 1.409 14.214 1.409 8.054 0 14.686 0.47 14.686 0.47 0 0.464-0.474 1.402-0.95 2.81-0.473 0.935-1.422 4.686-2.365 8.436l-1.898 6.093H475.5l-3.316 11.252c-4.738 15.937-4.264 16.406 13.738 14.064 7.581-0.939 7.107-1.877 3.79 9.375l-2.841 9.374h-19.9c-31.263 0-31.737-0.939-23.212-27.658 2.372-8.436 4.74-15.468 4.74-15.468s-3.317-0.47-8.056-0.47c-4.26 0-8.05 0-8.05-0.469 3.315-11.716 4.734-15.468 4.734-16.406 0.474-0.934 1.423-1.403 8.53-1.403h8.05l3.79-14.534h-7.576c-5.688 0-7.58 0-7.58-0.939 0-0.933 4.264-14.528 4.733-15.937 0.95-0.933 72.483-0.469 72.008 0.47z m91.9 33.752c0 0.938-0.949 3.75-1.42 6.093-2.846 13.125-6.631 15.937-21.792 16.875-5.209 0.47-9.948 0.938-9.948 0.938-0.949 1.405-0.949 12.657 0 14.53l1.423 1.877 9.473-0.47c5.21-0.469 9.474-0.469 9.474-0.469 0 0.939-5.21 17.345-5.684 17.81-0.948 0.94-29.843 0.47-33.634-0.934-5.683-1.878-5.683-1.409-5.214-30.94l0.476-25.78h24.16v9.844h4.74c5.208 0 5.682-0.47 8.05-7.033l1.422-3.75h9.475c8.524 0.47 9.473 0.47 8.999 1.409z m44.53-200.626l-5.213 22.5h7.107c36.476 0.938 51.637-40.784 16.105-43.596-5.684-0.47-10.893-0.939-11.367-0.939-1.422 0-1.422 1.41-6.631 22.035z m-188.542 31.874c-8.999 3.75-17.524 37.501-10.417 42.656 5.208 4.22 12.79-2.812 16.58-14.529 6.158-21.565 4.26-31.878-6.163-28.127z m282.339 2.342c-9.478 4.69-16.58 37.971-9.478 41.721 9.478 5.155 21.794-12.654 21.794-31.877 0-8.905-5.214-13.125-12.316-9.844zM557.927 562.957l-2.368 8.436c-1.422 4.22-2.367 7.97-2.841 8.435 0 0.47 2.367-0.465 5.683-2.343 9.473-4.685 12.316-5.623 26.053-6.092l11.846-0.47c1.893-5.623 2.368-7.966 2.368-8.435 0.474-0.47-40.267-0.47-40.741 0.47z m-8.05 27.185l-1.899 7.5 40.741-0.47 2.368-7.5c-32.212 0-41.21 0-41.21 0.47z m128.848-16.876c-1.896 6.097-3.315 10.782-2.841 10.782l5.683-1.873c2.842-0.94 8.055-2.347 10.897-2.812 2.841-0.469 5.209-0.94 5.683-0.94 0 0 4.74-14.532 4.74-15.001 0 0-4.74-0.465-10.423-0.465H682.04l-3.316 10.31z m-7.58 23.907c0 0.469-1.893 5.159-3.317 10.782-1.892 5.624-3.315 10.783-3.315 10.783 0 0.465 2.367-0.47 5.683-1.878 3.316-1.403 8.055-2.812 10.897-3.28 6.157-0.94 6.631-1.404 7.107-3.751 0.474-0.935 1.422-4.685 2.366-7.497l1.898-5.628H682.04c-5.683 0-10.897 0-10.897 0.469z m-16.58 53.908l20.845 0.47c4.264-14.064 5.683-18.754 5.683-19.223l-20.844-0.934-5.684 19.687z"
                  fill="#FFFFFF" p-id="4102"></path>
              </svg>
              <svg v-if='item.type=="YE"' t="1605335905084" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6723" width="22" height="22">
                <path
                  d="M514.591468 0c-282.099783 0-510.889371 228.789588-510.889371 510.889371s228.789588 510.889371 510.889371 510.889371 510.889371-228.789588 510.889371-510.889371-228.789588-510.889371-510.889371-510.889371z m-20.731743 297.64859c18.510484-8.885033 37.761388-17.770065 56.271873-26.655098 18.510484-8.885033 32.578453-15.548807 42.944324-20.731742 15.548807-7.404194 29.616775-11.106291 42.203904-10.365871 12.587129 0.740419 22.953001 2.221258 31.097614 5.923355 9.625452 4.442516 18.510484 10.365871 25.914679 17.770065l39.242227 66.637744H425.000723c23.69342-11.106291 46.646421-22.212581 68.859002-32.578453z m309.4953 194.730296H658.973247c-16.289226 0-29.616775 5.182936-40.723066 16.289227-11.106291 10.365871-17.029646 25.174259-17.029646 40.723066 0.740419 11.106291 2.961678 20.731743 6.663774 29.616775 3.702097 7.404194 8.885033 14.067968 17.029646 19.991323 8.144613 5.923355 19.250904 8.885033 34.059292 8.885032h144.381778v115.505423c0 7.404194-1.480839 15.548807-4.442516 22.212582-2.961678 6.663774-6.663774 13.327549-11.84671 18.510484-10.365871 11.106291-25.174259 17.029646-39.982646 17.029646H285.80188c-8.144613 0-15.548807-1.480839-22.953001-4.442516-7.404194-2.961678-13.327549-7.404194-19.250904-12.58713-5.182936-5.182936-9.625452-11.106291-13.327548-18.510484-2.961678-7.404194-4.442516-14.808388-4.442517-22.953001V406.490239c0-16.289226 5.923355-29.616775 17.029646-40.723066 11.106291-11.106291 25.174259-17.029646 40.723066-17.029646h461.281272c16.289226 0 29.616775 5.923355 40.723066 17.029646 11.106291 11.106291 17.029646 25.174259 17.029646 40.723066v85.888647z m-125.871294 62.935648c0 7.404194-2.961678 14.067968-8.144613 19.250903-5.182936 5.182936-11.84671 8.144613-19.250904 8.144614s-14.067968-2.961678-19.250904-8.144614c-5.182936-5.182936-8.144613-11.84671-8.144613-19.250903s2.961678-14.067968 8.144613-19.250904c5.182936-5.182936 11.84671-8.144613 19.250904-7.404194 7.404194 0 14.067968 2.961678 19.250904 7.404194 5.182936 5.182936 8.144613 12.587129 8.144613 19.250904z"
                  fill="#409EFF" p-id="6724"></path>
              </svg>
              <span :style="{'margin-left': '5px','color': form.paymentId==item.id?color:'#666'}">{{ item.name }}</span>
            </div>
          </el-form-item>
          <el-form-item v-if="showNoneTip">
            <h3 style="color: crimson">您录入的信息中暂无可用卡号</h3>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('form')" icon="el-icon-refresh">重置</el-button>
            <el-button v-preventReClick @click="submitForm" icon="el-icon-search" type="warning" :disabled="dictEdite&&!showNoneTip">查询套餐</el-button>
            <!--  充值按钮disable情况: ①未选择套餐 ②未选择是否次月生效          -->
            <!--            <el-button @click="paymentForm" :disabled="!showMealFormItem||!form.setMealId||!form.dictIsPreStorage">充值</el-button>-->
            <el-button v-preventReClick @click="recharge" :disabled="!form.setMealId||form.dictIsPreStorage==''||!form.paymentId" icon="el-icon-wallet" type="primary">充值</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="showErrorCardsDialog = true" v-if="errorCards.length>0" icon="el-icon-error" type="danger">异常卡号</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 支付二维码弹窗 -->
    <el-dialog :visible.sync="showPayWayDialog" title="充值" center width="500px">
      <div v-if="dialogText!=''">
        <h3>订单金额：{{ payBackBody.price }} 元</h3>
        <span>{{ dialogText }}，点击‘确定’按钮立即支付</span>
      </div>
      <div v-if="dialogText==''">
        <h3>订单金额：{{ payBackBody.price }} 元，请打开<span v-if="form.paymentType=='WXZF'">微信</span><span v-if="form.paymentType=='ZFBZF'">支付宝</span><span v-if="form.paymentType=='UPSMZF'">银联</span>扫一扫支付</h3>
        <img :src="payBackBody.payQr" />
      </div>
      <span slot="footer" class="dialog-footer">
       <el-button @click="cancelPayment" v-if="dialogText==''">取消支付</el-button>
       <el-button @click="showPayWayDialog = false" v-if="dialogText!=''">取 消</el-button>
       <el-button @click="balanceRecharge" type="primary" v-if="dialogText!=''" v-preventReClick :loading="loading">确 定</el-button>
       </span>
    </el-dialog>
    <!--  显示异常卡号  -->
    <el-dialog :visible.sync="showErrorCardsDialog" title="异常卡号列表" center width="700">
      <h3>您录入的数据中共有 {{ errorCards.length }} 张卡存在异常，已为您过滤，明细如下：</h3>
      <el-table
        :data="errorCards"
        style="width: 100%"
        ref="errorCards"
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        height="300">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="cardNumber"
          label="卡号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reason"
          label="异常信息"
          align="center"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
       <el-button @click="showErrorCardsDialog = false">我知道了</el-button>
        <el-button @click="downloadErrorCards" >下载异常卡号</el-button>
       </span>
    </el-dialog>
  </div>
</template>
<script>
import {searchSetmealsGroupByHeaderId, choosePayment, batchRecharge, getBatchRechargeAmount, balanceRecharge, orderStatus, initSetMealHeadSelect, agentListInnit, selectAgentOne} from '@/api/getData'

export default {
  name: '',
  data() {
    return {
      form: {
        type: 1,         //卡号类型
        startNum: '',    //起始卡号
        endNum: '',      //结束卡号
        numberStr: '',   //不规则卡号
        setMealHeadId: '',//套餐大类
        userId: '',        //代理账号id
        nums: '',
        setMealId: '',   //套餐id
        setMealName: '', //套餐名称
        dictIsPreStorage: '',//是否次月生效 YES NO
        paymentId: '',    //支付方式
        paymentType: '',  //支付方式类型
        dictEdite: false, //是否允许修改卡号
        obj: 'OEM',       //OEM为自己充值还是给代理充值
        loginName: '',    //代理账号
      },
      rules: {
        startNum: [
          {required: true, message: '请输入起始卡号', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              let reg = /^[A-Za-z0-9]{5,20}$/;
              let endNum = this.form.endNum
              if (!value) {
                callback(new Error('请输入起始卡号，长度为5-20位数字格式'));
                return false;
              } else {
                if (reg.test(value)) {
                  if (endNum == '') {
                    callback();
                  } else {
                    if (endNum < value) {
                      callback(new Error('起始卡号不能大于结束卡号'));
                      return false;
                    } else {
                      callback();
                    }
                  }
                } else {
                  callback(new Error('请修改起始卡号，长度为5-20位数字格式'));
                  return false;
                }
              }
            }, tigger: 'blur'
          }
        ],
        endNum: [
          {required: true, message: '请输入结束卡号', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              let reg = /^[A-Za-z0-9]{5,20}$/;
              let startNum = this.form.startNum
              if (!value) {
                callback(new Error('请输入结束卡号，长度为5-20位数字格式'));
                return false;
              }
              if (reg.test(value)) {
                if (startNum == '') {
                  callback();
                } else {
                  if (startNum > value) {
                    callback(new Error('起始卡号不能大于结束卡号'));
                    return false;
                  } else {
                    callback();
                  }
                }
              } else {
                callback(new Error('请修改结束卡号，长度为5-20位数字格式'));
                return false;
              }

            }, tigger: 'blur'
          }
        ],
        numberStr: [{required: true, message: '请输入不规则卡号', trigger: 'blur'}],
        obj: [{required: true, message: '请选择充值对象', trigger: 'change'}],
        setMealId: [{required: true, message: '请选择套餐', trigger: 'change'}],
        dictIsPreStorage: [{required: true, message: '请选择套餐是否次月生效', trigger: 'change'}],
        setMealHeadId: [{required: true, message: '请选择套餐大类', trigger: 'change'}],
        loginName: [{required: true, message: '请选择代理账号', trigger: 'blur'}],
        paymentId: [{required: true, message: '请选择支付方式', trigger: 'change'}],
      },
      num: 0,
      headMealOptions: [],
      pagekey: '',
      showMealFormItem: false,
      mealDetail: {},
      showPayWayDialog: false,
      paymentList: [],//支付方式列表
      errorCards: [],//通过查询接口校验出的异常卡号列表
      showErrorCardsDialog: false,
      color: '',
      roleChar: '',
      dialogText: '',
      payBackBody: {
        id: '',
        price: '',
        payQr: '',
      },
      time: 120,
      setMealHeadOptions: [],//套餐大类列表
      loginNames: [],//代理账号列表
      showNoneTip: false,//当用户录入的信息检测到可用账号数据为0时 值为true
      loading: false,
    }
  },
  async mounted() {
    let t = localStorage.getItem('theme');
    this.color = t ? JSON.parse(t).lightBg : '#409EFF';
    this.roleChar = localStorage.getItem('roleChar');
    this.pagekey = await this.$getPageKey();
    this.getPaymentList();
    this.getSetMealHeadOptions();
  },
  methods: {
    //点击页面充值按钮执行拉起弹窗方法
    async recharge() {
      this.pagekey = await this.$getPageKey();

      if(this.errorCards.length>0){
        this.$confirm(`您是否已确认并同意放弃充值 ${this.errorCards.length}张 异常卡号，点击确定立即过滤异常卡号并获取${this.num}张卡的支付二维码?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.next();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消充值'
          });
        });
      }
      else{
        this.next();
      }
    },
    //下一步 继续充值
    async next(){
      let _this = this;
      let arr = [
        {
          nums: this.form.nums.split('\n'),
          setMealId: this.form.setMealId,
          setMealName: this.form.setMealName,
          dictIsPreStorage: this.form.dictIsPreStorage,
          paymentId: this.form.paymentId,
        }
      ]
      if (this.form.paymentId == 'BALANCE_OEM' || this.form.paymentId == 'BALANCE_AGENT') {           //OEM余额充值 or 理余额充值
        arr[0].paymentId = '';
        this.dialogText = `确定要为表单项中 ${this.num} 张卡号通过账户余额进行批量充值操作？`;
        this.showPayWayDialog = true;
        let res = await getBatchRechargeAmount(arr,{pagekey: this.pagekey})

        if (res._result&&res.data) {
          this.payBackBody.payQr = '';
          this.payBackBody.id = res.data.id;
          this.payBackBody.price = res.data.price;
          this.showPayWayDialog = true;
        }
      } else {   //其他支付方式 接口查询付款二维码
        this.dialogText = '';
        let res = await batchRecharge(arr,{pagekey: this.pagekey})
        if (res._result&&res.data) {
          this.payBackBody.payQr = res.data.payQr;
          this.payBackBody.id = res.data.id;
          this.payBackBody.price = res.data.price;
          this.showPayWayDialog = true;
          //拉起弹窗 展示付款二维码 开启定时器
          this.time = setInterval(function () {
            _this.getPayResult();
          }, 2000)
          this.showPayWayDialog = true;
        }
        else{
          this.$message.error('获取支付二维码失败，请重试！')
        }
      }
      this.pagekey = await this.$getPageKey();
    },
    //扫码支付 获取支付结果定时器
    async getPayResult() {
      let isSuccess = await orderStatus({id: this.payBackBody.id})
      if (isSuccess.data) {
        window.clearInterval(this.time)
        // this.$router.push({path: '/rechargeBatch/cusBatchRechargeOrderLog'});
        this.$router.push({path: '/rechargeBatch/cusBatchRechargeOrderLog'});
      }
    },
    //取消扫码支付，关闭弹窗，关闭定时器
    cancelPayment() {
      this.showPayWayDialog = false;
      window.clearInterval(this.time);
      this.resetForm();
    },
    //余额支付
    async balanceRecharge() {
      this.loading = true;
      balanceRecharge({id: this.payBackBody.id}, {pagekey: this.pagekey}).then(async v => {
        if (v._result&&v.code==10000) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          // this.$message.success("操作成功！")
        }
        this.loading = false;
        this.showPayWayDialog = false;
        this.resetForm();
        this.pagekey = await this.$getPageKey();
      })

      /*debugger
      if (this.roleChar.indexOf('OEM_ADMIN')==0) {
        if(this.form.obj=='OEM'){
          this.$message({
            type: 'success',
            message: '测试（暂无接口）：oem余额支付成功！'
          })
          this.showPayWayDialog = false;
        }
        // else{ //逻辑：执行OEM为代理批量充值 扣代理账户余额
        //   balanceRecharge({id: this.payBackBody.id}, {pagekey: this.pagekey}).then(v => {
        //     this.showPayWayDialog = false;
        //     if (v._result&&v.code==10000) {
        //       this.$message.success("操作成功！");
        //     }
        //     this.resetForm();
        //   })
        // }
      }
      if (this.roleChar == 'DAILI_ADMIN' || (this.roleChar.indexOf('OEM_ADMIN')==0&&this.form.loginName)) {
        balanceRecharge({id: this.payBackBody.id}, {pagekey: this.pagekey}).then(v => {
          if (v._result) {
            this.$message.success("操作成功！")
            this.showPayWayDialog = false;
          }
        })
        this.resetForm();
        this.pagekey = await this.$getPageKey();
      }*/
    },
    //获取支付方式列表
    async getPaymentList() {
      let res = await choosePayment({dictPayTypeFlag: 'NATIVE'});
      this.paymentList = [];
      if (this.roleChar.indexOf('OEM') > -1) {
        this.paymentList = [{id: 'BALANCE_OEM', name: '余额充值', type: 'YE'}];
      }
      if (this.roleChar.indexOf('DAILI') > -1||(this.roleChar.indexOf('OEM')&&this.form.loginName)) {
        this.paymentList = [{id: 'BALANCE_AGENT', name: '余额充值', type: 'YE'}]
      }

      if (res._result && res.data) {
        for (let item of res.data) {
          let obj = {};
          obj.id = item.id;
          obj.name = item.paymentRealName;
          obj.type = item.payType ? item.payType : 'WXZF';
          this.paymentList.push(obj);
        }
        this.form.paymentId = this.paymentList[0].id;
      }
    },
    //切换卡号类型 清空表单项
    changeRechargeType(val) {
      this.resetForm();
      this.form.type = val;
    },
    //切换充值对象
    changeRechargeObj(i){
      this.form.obj = i;
      this.form.loginName = '';
      this.form.userId = '';
    },
    async submitForm() {
      //重置回显数据
      this.headMealOptions = [{value: '', label: '请选择', dictStatus: 'C_NO'}];
      this.mealDetail = {value: '', label: '请选择', dictStatus: 'C_NO'};
      this.showMealFormItem = false;
      this.num = 0;
      this.form.nums = '';
      this.form.setMealId = '';
      this.form.dictIsPreStorage = '';
      this.errorCards = [];
      let m,n;
      let set = [];
      //如果用户选择不规则卡号录入信息 ①过滤重复卡号 ②将信息返回给用户确认
      if(this.form.type==2){
        let arr = this.form.numberStr?this.form.numberStr.split('\n'):[];
        m = arr?arr.length:0;
        if(m>0){
          set = new Set(arr);
        }
        n = set?set.size:0;
        let text = ''
        set =  Array.from(set);
        if(m-n>0){
          text = `您总计录入了${m}张卡号，其中有${m-n}张重复卡号，已为您过滤`
          this.form.numberStr = Array.from(set).join('\n');
        }
        else{
          text = `您总计录入了${m}张卡号，无重复卡号`
        }
        this.$alert(text, '过滤提示', {
          confirmButtonText: '确定',
          callback: action => {
            //下一步执行接口查询批量充值的卡套餐小类 以及 是否次月生效
            this.sendData(set);
          }
        });
      }
      else{
        this.sendData(set,n)
      }
    },
    sendData(set,n){
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.form.loginName && this.form.userId == '') {
            let r = await selectAgentOne({loginName: this.form.loginName})
            if (r._result) {
              this.form.userId = r.data[0].id
            }
          }
          let res = await searchSetmealsGroupByHeaderId({
            startNum: this.form.startNum,
            endNum: this.form.endNum,
            nums:  set,
            setMealHeadId: this.form.setMealHeadId,
            userId: this.form.userId,
          })
          if (res._result && res.data) {
            this.num = res.data.nums?res.data.nums.length:0;
            this.showNoneTip = this.num==0?true:false;
            this.form.nums = res.data.nums?res.data.nums.join("\n"):[];
            this.form.numberStr = res.data.nums?res.data.nums.join("\n"):'';
            if (this.num < n && n > 0) {
              this.$message.warning('已为您过滤不属于您的卡号！')
            }
            if (this.num == 0) {
              this.$message.warning('暂无符合查询条件的卡号，请重新输入！');
              this.dictEdite = false;
              this.showMealFormItem = false;
            } else {
              this.dictEdite = true;
              this.showMealFormItem = true;
              if (res.data.setMealList) {
                for (let item of res.data.setMealList) {
                  let obj = {};
                  obj.value = item.id;
                  obj.label = item.mealName;
                  obj.flag = item.dictIsPreStorage ? item.dictIsPreStorage : 'NO';
                  this.headMealOptions.push(obj);
                }
              }
            }
            //接收异常卡号列表，并回显卡号+异常原因给用户
            if(res.data.errorList){
              this.errorCards = res.data.errorList;
              if(this.errorCards&&this.errorCards.length>0){
                this.showErrorCardsDialog = true;
              }
            }
          } else {
            this.form.numberStr = '';
            this.dictEdite = false;
          }
        } else {
          this.$message.error('请修改表单项内错误信息')
        }
      })
    },
    //切换套餐类型
    changeSetMeal(val) {
      this.form.setMealId = val.value;
      this.form.setMealName = val.label;
    },
    //获取套餐大类列表
    async getSetMealHeadOptions() {
      let returnData = await initSetMealHeadSelect({});
      this.setMealHeadOptions = [];
      if (returnData._result) {
        for (let item of returnData.data) {
          const obj = {};
          obj.value = item.id;
          obj.label = item.name;
          this.setMealHeadOptions.push(obj);
        }
      }
    },
    //关联代理账号
    async querySearch(queryString, cb) {
      let returnData = await agentListInnit({
        loginName: queryString
      });
      if (returnData._result) {
        this.loginNames = [];
        for (let item of returnData.data) {
          this.loginNames.push({value: item.loginName, id: item.id})
        }
      }
      cb(this.loginNames);
    },
    //选中的代理账号对象
    handleSelect(item) {
      this.form.loginName = item.value;
      this.form.userId = item.id;
    },
    //重置表单
    resetForm() {
      this.form = {
        type: 1,         //卡号类型
        startNum: '',    //起始卡号
        endNum: '',      //结束卡号
        numberStr: '',   //不规则卡号
        setMealHeadId: '',//套餐大类
        userId: '',       //代理账号
        loginName: '',
        nums: '',
        setMealId: '',   //套餐id
        dictIsPreStorage: '',//是否次月生效
        paymentId: '',   //支付方式
        paymentType: '', //支付方式类型
        obj: 'OEM',
      }
      this.num = 0;
      this.mealDetail = {};
      this.showMealFormItem = false;
      this.dictEdite = false;
      this.errorCards = [];
      this.showNoneTip = false;
    },
    //导出异常卡号
    downloadErrorCards(){
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/utils/Export2Excel');
        const tHeader = ['卡号', '原因' ];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['cardNumber', 'reason' ];
        // 上面的cardNumber、reason是errorCards里对象的属性
        const list = this.errorCards;  //把data里的errorCards存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '异常卡号');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
  beforeDestroy() {
    window.clearInterval(this.time)
  }
}
</script>
<style scoped>
.div_main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
